<template>
	<view>
		<view class="questionTitle" v-if="question.questiontype!==3">{{index + 1}}、{{question.title}}</view>
		<view class="questionTitle" v-if="question.questiontype===3">{{index + 1}}、{{question.stems[0].content}}</view>
		<!--单选、多选-->
		<view class="questionContent" v-if="question.questiontype < 3 || question.questiontype === 7">
			<view class="saBox" v-for="(item, index) in standardAnswer" :key="index" v-if="!hideAnswer">
				<view class="sa">正确答案: {{item}}</view>
			</view>
			<view class="uaBox">
				<view class="ua" :class="{uaActive: activeArr[i]}" v-for="(entry, i) in question.stems" :key="i">
					<text>{{entry.index}} {{entry.content}}</text> 
					<view class="uaHint" v-if="allAnswerArr[i]">
						<image v-if="correctArr[i]" src="../../static/img/test/correct.png"></image>
						<image v-else src="../../static/img/test/wrong.png"></image>
					</view>
				</view>
				<image v-if="question.right" class="correctRemark" src="../../static/img/test/correct.png"></image>
				<image v-else class="correctRemark wrongRemark" src="../../static/img/test/wrong.png"></image>
			</view>
		</view>
		<!--判断-->
		<view class="questionContent" v-if="question.questiontype === 3">
			<view class="saBox" v-if="!hideAnswer">
				<view class="sa">正确答案: {{standardAnswer[0] === '错' ? '错误' : '正确'}}</view>
			</view>
			<view class="uaBox">
				<view class="ua" :class="{uaActive: activeArr[0] && activeArr[0] === '对'}" >
					<text>正确</text> 
					<view class="uaHint" v-if="activeArr[0] && activeArr[0] === '对'">
						<image v-if="correctArr[0]" src="../../static/img/test/correct.png"></image>
						<image v-else src="../../static/img/test/wrong.png"></image>
					</view>
				</view>
				<view class="ua" :class="{uaActive: activeArr[0] && activeArr[0] === '错'}" >
					<text>错误</text> 
					<view class="uaHint" v-if="activeArr[0] && activeArr[0] === '错'">
						<image v-if="correctArr[0]" src="../../static/img/test/correct.png"></image>
						<image v-else src="../../static/img/test/wrong.png"></image>
					</view>
				</view>
				<image v-if="question.right" class="correctRemark" src="../../static/img/test/correct.png"></image>
				<image v-else class="correctRemark wrongRemark" src="../../static/img/test/wrong.png"></image>
			</view>
		</view>
		<!--连线题-->
		<view class="questionContent" v-if="question.questiontype === 4">
			<view class="saBox" v-for="(item, index) in standardAnswer" :key="index" v-if="!hideAnswer">
				<view class="sa">正确答案: {{item}}</view>
			</view>
			<view class="uaBox">
				<view class="ua clear" v-for="(entry, i) in question.stems" :key="i">
					<view class="left" style="width: 50%;">{{entry.stemleft.index}}. {{entry.stemleft.content}}</view>
					<!-- <view class="left uaActive" style="width: 50%;">{{entry.stemright.index|letterFilter}}. {{entry.stemright.content}}</view> -->
					<view class="left uaActive" style="width: 50%;" v-if="linkStem.length>0">{{linkStem[i].index}}. {{linkStem[i].content}}</view>
					<view class="uaHint" v-if="allAnswerArr[i]">
						<image v-if="correctArr[i]" src="../../static/img/test/correct.png"></image>
						<image v-else src="../../static/img/test/wrong.png"></image>
					</view>
				</view>
				<image v-if="question.right" class="correctRemark" src="../../static/img/test/correct.png"></image>
				<image v-else class="correctRemark wrongRemark" src="../../static/img/test/wrong.png"></image>
			</view>
		</view>
		<!--排序-->
		<view class="questionContent" v-if="question.questiontype === 5">
			<view class="saBox" v-for="(item, index) in standardAnswer" :key="index" v-if="!hideAnswer">
				<view class="sa">正确答案: {{item}}</view>
			</view>
			<view class="uaBox">
				<view class="ua" v-for="(item, i) in userStems" :key="i">
					<text><text class="uaActive">{{answerOrder[i]}}.</text> {{item}}</text> 
					<view class="uaHint">
						<image v-if="correctArr[i]" src="../../static/img/test/correct.png"></image>
						<image v-else src="../../static/img/test/wrong.png"></image>
					</view>
				</view>
				<image v-if="question.right" class="correctRemark" src="../../static/img/test/correct.png"></image>
				<image v-else class="correctRemark wrongRemark" src="../../static/img/test/wrong.png"></image>
			</view>
		</view>
		<!--填空-->
		<view class="questionContent" v-if="question.questiontype === 6">
			<view class="saBox" v-for="(item, index) in standardAnswer" :key="index" v-if="!hideAnswer">
				<view class="sa">正确答案: {{item}}</view>
			</view>
			<view class="uaBox">
				<view class="ua" v-for="(item, i) in userStems" :key="i">
					<text class="uaActive" v-show="beginWithSpace">{{item}} </text>
					<text>{{gapStem[i]}}</text>
					<text class="uaActive" v-show="!beginWithSpace"> {{item}}</text>
					<view class="uaHint">
						<image v-if="correctArr[i]" src="../../static/img/test/correct.png"></image>
						<image v-else src="../../static/img/test/wrong.png"></image>
					</view>
				</view>
				<image v-if="question.right" class="correctRemark" src="../../static/img/test/correct.png"></image>
				<image v-else class="correctRemark wrongRemark" src="../../static/img/test/wrong.png"></image>
			</view>
		</view>
		<!--填字题-->
		<view class="questionContent" v-if="question.questiontype === 8">
			<view class="saBox" v-if="!hideAnswer">
				<view class="sa">正确答案: {{standardAnswer}}</view>
			</view>
			<view class="uaBox">
				<view class="ua">
					<text class="uaActive">{{userStems}} </text>
					<view class="uaHint">
						<image v-if="correctArr[0]" src="../../static/img/test/correct.png"></image>
						<image v-else src="../../static/img/test/wrong.png"></image>
					</view>
				</view>
				<image v-if="question.right" class="correctRemark" src="../../static/img/test/correct.png"></image>
				<image v-else class="correctRemark wrongRemark" src="../../static/img/test/wrong.png"></image>
			</view>
		</view>
		<!--问答题-->
		<view class="questionContent" v-if="question.questiontype === 9">
			<view class="saBox" v-if="!hideAnswer">
				<view class="sa">正确答案: {{standardAnswer}}</view>
			</view>
			<view class="uaBox">
				<view class="ua">
					<text class="uaActive">{{question.useranswers}} </text>
					<view class="uaHint">
						<image v-if="correctArr[0]" src="../../static/img/test/correct.png"></image>
						<image v-else src="../../static/img/test/wrong.png"></image>
					</view>
				</view>
				<image v-if="question.right" class="correctRemark" src="../../static/img/test/correct.png"></image>
				<image v-else class="correctRemark wrongRemark" src="../../static/img/test/wrong.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allAnswerArr:[],
				//序列化的标准答案
				standardAnswer: [],
				// 用户已答的
				activeArr: [],
				//用户答对的
				correctArr: [],
				//排序题用户答题结果
				userStems: [],
				//匹配用户结果
				linkStem: [],
				gapStem: [],
				beginWithSpace: false
			}
		},
		props:{
			question: {
				type: Object,
				default: ()=>{}
			},
			hideAnswer:{
				type: Boolean,
				default: false
			},
			index:{
				type: Number
			}
		},
		computed:{
			answerOrder(){
				if(!this.question || this.question.questiontype !== 5){
					return []
				}
				if(this.question.useranswers === null){
					return []
				}
				return this.question.useranswers.split('，')
			}
		},
		watch:{
			question: {
				//type: 1单选、2多选、3判断、4连线、5排序、6填空、7判断（官方题）、8填字、9问答
				
				handler(val){			
					this.standardAnswer = []
					this.activeArr = []
					this.allAnswerArr = []
					this.correctArr = []
					this.userStems = []
					this.gapStem = []
					this.linkStem = []
					this.beginWithSpace = false
					// if(!val || val.useranswers === null){
					// 	return
					// }
					//单选
					try{
						if(val.questiontype === 1 || val.questiontype === 7){
							if(typeof val.standardanswers === 'string'){
								val.standardanswers = val.standardanswers.trim()
							}
							val.stems.forEach((e, i) => {
								//获取标准答案
								if(e.index === val.standardanswers){
									this.standardAnswer.push(e.index + ' ' + e.content)
								}
								if(e.index === val.useranswers){
									this.activeArr.push(true)
									this.allAnswerArr.push(true)
								}else{
									this.activeArr.push(false)
									this.allAnswerArr.push(false)
								}
								var singleChoiseAnswer = val.standardanswers
								if(typeof singleChoiseAnswer === 'string'){
									singleChoiseAnswer = singleChoiseAnswer.trim()
								}
								if(e.index === singleChoiseAnswer && e.index === val.useranswers){
									this.correctArr.push(true)								
								}else{
									this.correctArr.push(false)
								}
							})
						}
						//多选
						if(val.questiontype === 2){
							val.stems.forEach((e, i) => {
								if(val.standardanswers.indexOf(e.index) >= 0){
									this.standardAnswer.push(e.index + ' ' + e.content)
								}
								if(val.useranswers.indexOf(e.index) >= 0){
									this.activeArr.push(true)
								}else{
									this.activeArr.push(false)
								}
								if(val.useranswers.indexOf(e.index) >= 0 || val.standardanswers.indexOf(e.index) >= 0){
									this.allAnswerArr.push(true)
								}else{
									this.allAnswerArr.push(false)
								}
								if(val.standardanswers.indexOf(e.index) >= 0 && val.useranswers.indexOf(e.index) >= 0){
									this.correctArr.push(true)								
								}else{
									this.correctArr.push(false)
								}
							})
						}
						//判断
						if(val.questiontype === 3){
							this.standardAnswer.push(val.standardanswers[0].result)
							const hasAnswer = val.useranswers.findIndex((e) => {
								return e.index === "1"
							})
							// if(hasAnswer >= 0){
							// 	this.activeArr.push(true)
							// }else{
							// 	this.activeArr.push(false)
							// }
							if(hasAnswer >= 0){
								this.activeArr.push(val.useranswers[hasAnswer].result)
								this.allAnswerArr.push(true)
							}else{
								this.allAnswerArr.push(false)
							}
							const iscorrect = val.useranswers.findIndex((e)=>{
								return e.result === val.standardanswers[0].result
							})
							if(iscorrect >= 0){
								this.correctArr.push(true)
							}else{
								this.correctArr.push(false)
							}
						}
						//连线
						if(val.questiontype === 4){
							this.linkStem = []
							if(val.stems){
								val.stems.forEach((e,i)=>{
									this.allAnswerArr.push(true)
									let num = val.useranswers.findIndex((element, index)=>{
										return element.indexleft === e.stemleft.index
									})
									if(num >= 0){
										let item = val.stems.find((stemItem)=>{
											return stemItem.stemright.index === val.useranswers[num].indexright
										})
										item = JSON.parse(JSON.stringify(item.stemright))
										if(/\d/.test(item.index)){
											item.index = String.fromCharCode(item.index * 1 + 64)
										}
										this.linkStem.push(item)
									}else{
										this.linkStem.push({index: '', content: ''})
									}
								})
							}
							val.standardanswers.forEach((e, i)=>{
								let letter = '', str = ''
								let num = val.stems.findIndex((element, index)=>{
									return element.stemright.index === e.indexright
								})
								if(/\D/.test(e.indexright)){
									letter = e.indexright
									str = `${e.indexleft}. ${val.stems[i].stemleft.content} ${letter}. `
									if(num>=0){
										str += val.stems[num].stemright.content
									}
								}else{
									letter = this.numToLetter(e.indexright)
									str = `${e.indexleft}. ${val.stems[e.indexleft * 1 - 1].stemleft.content} ${letter}. `
									if(num>=0){
										str += val.stems[num].stemright.content
									}
								}
								this.standardAnswer.push(str)
							})
							val.stems.forEach((e, i)=>{
								let hasUs = val.useranswers.some((el)=>{
									return el.indexright === e.stemright.index
								})
								if(hasUs){
									this.activeArr.push(true)
								}else{
									this.activeArr.push(false)
								}
							})
							val.standardanswers.forEach((e, i) => {
								let isCorrect = val.useranswers.some((el) => {
									return JSON.stringify(e) === JSON.stringify(el)
								})
								if(isCorrect){
									this.correctArr.push(true)
								}else{
									this.correctArr.push(false)
								}
							})
						}
						//排序题
						if(val.questiontype === 5){
							if(/，/.test(val.standardanswers)){
								//手动录入的标准答案带‘，’
								this.standardAnswer.push(val.standardanswers.replace(/，|\s/g, ''))
								let standardOrder = val.standardanswers.split('，')
								let answerOrder = val.useranswers.split('，')
								
								for(let value of answerOrder){
									// let suoyin = value * 1 - 1 + ''
									// let content = val.stems[suoyin].content
									this.userStems.push(val.stems[value * 1 - 1].content) 
								}
								standardOrder.forEach((e, i) => {
									this.allAnswerArr.push(true)
									let result = e === answerOrder[i] ? true : false
									this.$set(this.correctArr, i, result)
								})
							}else{
								//表格导入的标准答案为字母并且没有分隔符
								this.standardAnswer.push(val.standardanswers.replace(/，|\s/g, ''))
								let standardOrder = val.standardanswers.split(/\B/)
								let answerOrder = val.useranswers.split('，')
								
								for(let value of answerOrder){
									let questionrow = val.stems.find(e=>{return e.index === value})
									let content = questionrow.content
									this.userStems.push(content) 
								}
								standardOrder.forEach((e, i) => {
									this.allAnswerArr.push(true)
									let result = e === answerOrder[i] ? true : false
									this.$set(this.correctArr, i, result)
								})
							}
						}
						//填空题
						if(val.questiontype === 6){
							val.standardanswers.forEach((e)=>{
								this.allAnswerArr.push(true)
								this.standardAnswer.push(e.result)
								this.activeArr.push(false)
								let isright = false
								if(val.useranswers instanceof Array){
									isright = val.useranswers.some(el=>{
										return JSON.stringify(el) === JSON.stringify(e)
									})
								}else{
									isright = false
								}
								if(isright){
									this.correctArr.push(true)
								}else{
									this.correctArr.push(false)
								}
							})
							if(val.useranswers instanceof Array){
								val.useranswers.forEach((e)=>{
									this.$set(this.activeArr, e.index, true)
								})
							}
							const stem = val.title.split('_________')
							const beginWithSpace = /^_________/.test(val.stems)
							const endWithSpace = /_________$/.test(val.stems)
							this.beginWithSpace = beginWithSpace
							if(beginWithSpace){
								stem.shift()
							}
							if(endWithSpace){
								stem.pop()
							}
							if(val.useranswers instanceof Array){
								stem.forEach((e, i, a)=>{
									this.gapStem.push(e)
									let ua = val.useranswers.find((el)=>{
										return (el.index * 1 - 1) === i
									})
									if(ua){
										this.userStems.push(ua.result)
									}
								})
							}
						}
						if(val.questiontype === 8){
							if(val.standardanswers instanceof Array){
								this.standardAnswer = val.standardanswers.join(',')
							}else{
								this.standardAnswer = '-'
							}
							if(val.useranswers instanceof Array){
								this.userStems = val.useranswers.join(',')
							}else{
								this.userStems = '-'
							}
							var result = true
							if(!(val.useranswers instanceof Array)){
								result = false
							}else{
								val.standardanswers.forEach((e, i)=>{
									if(val.useranswers.indexOf(e) < 0){
										result = false
									}
								})
							}
							this.correctArr.push(result)
						}
						//问答题
						if(val.questiontype === 9){
							this.standardAnswer = val.standardanswers
						}
					}catch(err){
						console.log(err)
					}
				},
				immediate: true
			}
		},
		filters:{
			letterFilter(n){
				if(n === ''){
					return ''
				}
				return String.fromCharCode(n * 1 + 64)
			}
		},
		methods: {
			numToLetter(n){
				return String.fromCharCode(n * 1 + 64)
			}
		}
	}
</script>

<style lang="scss">
.questionTitle{
	position: relative;
	padding-left: 56rpx;
	margin-right: 34rpx;
	font-size: 40rpx;
	// color: #373737;
	color: #976248;
	font-weight: bold;
	// &:before{
	// 	position: absolute;
	// 	content: '';
	// 	width: 16rpx;
	// 	top: 0;
	// 	bottom: 0;
	// 	left: 20rpx;
	// 	border-radius: 8rpx;
	// 	background: #2C95F8;
	// }
}
.questionContent{
	margin-top: 30rpx;
	padding-left: 56rpx;
	.saBox{
		margin-bottom: 10rpx;
		padding-right: 10px;
		font-size: 0;
		.sa{
			display: inline-block;
			padding: 8rpx 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
			color: #ffffff;
			background-color: #3e9b2d;
			// background-image: url('../../static/img/test/lighting.png');
			// background-repeat: no-repeat;
			// background-position: 10rpx 7rpx;
			// background-size: 12rpx 12rpx;
		}
	}
	.uaBox{
		position: relative;
		.ua{
			margin: 30rpx 0;
			font-size: 32rpx;
			color: #b8b8b8;
			position: relative;
			padding-right: 70rpx;
			.uaHint{
				opacity: 0;
				position: absolute;
				right: 40rpx;
				top: 8rpx;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.uaActive{
			// color: #2C95F8;
			color: #3e9b2d;
		}
		.correctRemark{
			position: absolute;
			width: 45rpx;
			height: 32rpx;
			right: 40rpx;
			bottom: 5rpx;
		}
		.wrongRemark{
			width: 33rpx;
			height: 33rpx;
		}
	}
}
.lighting{
	background-image: url('../../static/img/test/lighting.png');
	background-position: 10rpx 5rpx;
	background-size: 12rpx 12rpx;
}
</style>
